<template>
    <div>
        <!-- seach区域 -->
        <div class="seach">
            <span>
                {{$t('diccod')}}
                <el-input v-model.trim="selectParam.dicCode" :placeholder="$t('plsipt')" size="mini"></el-input>
                 {{$t('dicnam')}}
                <el-input v-model.trim="selectParam.dicName" :placeholder="$t('plsipt')" size="mini"></el-input>
                 {{$t('rotdiccod')}}
                <el-input v-model.trim="selectParam.rootCode" :placeholder="$t('plsipt')" size="mini"></el-input>
            </span>
            <el-button type="primary" @click="seachdiclist" size="mini" v-preventReClick>{{$t('qury')}}</el-button>
            <el-button type="warning" @click="showAdd(false, null)" size="mini" v-preventReClick>{{$t('add')}}</el-button>
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table :data="result" style="width: 100%;margin-bottom: 20px;" @expand-change="changeSta" row-key="id" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column prop="dicCode" :label="$t('diccod')" min-width="220">
                </el-table-column>
                <el-table-column prop="dicName" :label="$t('dicnam')" min-width="165">
                </el-table-column>
                <el-table-column prop="parentCode" :label="$t('sprdiccod')" min-width="172">
                </el-table-column>
                <el-table-column prop="rootCode" :label="$t('rotdiccod')" min-width="162">
                </el-table-column>
                <el-table-column prop="status" :label="$t('sta')" min-width="150">
                </el-table-column>
                <el-table-column :label="$t('opratn')" width="120" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="showAdd(true, scope.row)">{{$t('add')}}</el-link>
                        <el-link type="primary" @click="showEdit(scope.row.id)">{{$t('mdfy')}}</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="selectParam.pageNum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="selectParam.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
        <!-- 添加弹框 -->
        <el-dialog :title="$t('adddatadic')" :visible.sync="addDialogVisible" width="30%" @close='addDialogVisibleClosed(addForm)' :close-on-click-modal='isOk' :modal-append-to-body="false">
            <el-form :ref="addForm" :rules="addDicRul" :model="addForm" label-width="80px" :hide-required-asterisk="true">
                <span v-if="isAble">
                    <el-form-item :label="$t('rotdiccod')" prop="rootCode">
                        <el-input :disabled="isAble" v-model.trim="addForm.rootCode" type="merName"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('herlelcod')" prop="parentCode">
                        <el-input :disabled="isAble" v-model.trim="addForm.parentCode" type="merName"></el-input>
                    </el-form-item>
                </span>
                <el-form-item :label="$t('diccod')" prop="dicCode">
                    <el-input v-model.trim="addForm.dicCode" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('dicnam')" prop="dicName">
                    <el-input v-model.trim="addForm.dicName" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('dicnamen')" prop="dicNameEN">
                    <el-input v-model.trim="addForm.dicNameEN" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('dicsta')" prop="status">
                    <el-select v-model="addForm.status" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('vlid')" value="VALID"></el-option>
                        <el-option :label="$t('invlid')" value="INVALID"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addDic(addForm)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="addDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
        <el-dialog @close='editDialogVisibleClosed(editForm)' :title="$t('mdfy')" :visible.sync="editDialogVisible" width="30%" :close-on-click-modal='isOk' :modal-append-to-body="false">
            <el-form :ref="editForm" :rules="editDicRul" :model="editForm" label-width="80px" :hide-required-asterisk="true">
                <el-form-item :label="$t('rotdiccod')" prop="rootCode">
                    <el-input :disabled="true" v-model.trim="editForm.rootCode" type="merName"></el-input>
                </el-form-item>
                <el-form-item :label="$t('herlelcod')" prop="parentCode">
                    <el-input :disabled="true" v-model.trim="editForm.parentCode" type="merName"></el-input>
                </el-form-item>
                <el-form-item :label="$t('diccod')" prop="dicCode" :placeholder="$t('plsipt')">
                    <el-input v-model.trim="editForm.dicCode"></el-input>
                </el-form-item>
                  <el-form-item :label="$t('dicnam')" prop="dicName" :placeholder="$t('plsipt')">
                    <el-input v-model.trim="editForm.dicName"></el-input>
                </el-form-item>
                <el-form-item :label="$t('dicnamen')" prop="dicNameEN">
                    <el-input v-model.trim="editForm.dicNameEN" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('dicsta')" prop="status">
                    <el-select v-model="editForm.status" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('vlid')" value="VALID"></el-option>
                        <el-option :label="$t('invlid')" value="INVALID"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editdic(editForm)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="editDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    diclist,
    dicadd,
    dicedit,
    dicdetailedit,
    dictree
} from '@/libs/reqlist.js'
export default {
    data() {
        return {
            isAble: null,
            addDialogVisible: false,
            editDialogVisible: false,
            isOk: false,
            // 列表数据
            result: [],
            // 弹框标题
            title: '',
            // 弹框类型
            type: '',
            // 弹框语句
            message: '',
            parentCode: 1000001,
            total: 0,
            // 查询条件
            selectParam: {
                dicCode: '',
                dicName: '',
                rootCode: '',
                pageSize: 10,
                pageNum: 1
            },
            // 添加弹框
            addForm: {
                parentCode: '',
                dicCode: '',
                dicName: '',
                dicNameEN: '',
                rootCode: '',
                status: ''
            },
            editForm: {
                parentCode: '',
                dicCode: '',
                dicName: '',
                dicNameEN: '',
                rootCode: '',
                status: ''
            },
            addDicRul: {
                rootCode: [
                    { required: true, message: this.$t('rotdiccod'), trigger: 'blur' }
                ],
                parentCode: [
                    { required: true, message: this.$t('herlelcod'), trigger: 'blur' }
                ],
                dicCode: [
                    { required: true, message: this.$t('diccod'), trigger: 'blur' }
                ],
                dicName: [
                    { required: true, message: this.$t('dicnam'), trigger: 'blur' }
                ],
                dicNameEN: [
                    { required: true, message: this.$t('dicnamen'), trigger: 'blur' }
                ],
                status: [
                    { required: true, message: this.$t('dicsta'), trigger: 'blur' }
                ]
            },
            editDicRul: {
                dicCode: [
                    { required: true, message: this.$t('diccod'), trigger: 'blur' }
                ],
                dicName: [
                    { required: true, message: this.$t('dicnam'), trigger: 'blur' }
                ],
                dicNameEN: [
                    { required: true, message: this.$t('dicnamen'), trigger: 'blur' }
                ],
                status: [
                    { required: true, message: this.$t('dicsta'), trigger: 'blur' }
                ]
            },
            fakeid: 9998,
            hanldCode: null
        }
    },
    methods: {
        // 查询数据字典列表
        getDicList() {
            diclist(JSON.stringify(this.selectParam)).then(async(res) => {
                if (res.data.code === '000000') {
                    this.total = res.data.data.total - 0
                    // search  second
                    let j = res.data.data.list
                    for (let i = 0; i <= j.length - 1; i++) {
                        j[i].children = []
                        let item = j[i]
                        if (item.status === 'VALID') item.status = this.$t('vlid')
                        if (item.status === 'INVALID') item.status = this.$t('invlid')
                        if (item.hasChildren === true) {
                           delete item.hasChildren
                           item.children = [
                               { id: this.fakeid++ }
                           ]
                        }
                    }
                    this.result = res.data.data.list
                }
            })
        },
        async changeSta (expandedRows) {
            if (expandedRows.children !== null) {
                let rst = await dictree(expandedRows.dicCode)
                if (rst.data.code === '000000' && rst.data.data !== null) {
                    delete expandedRows.hasChildren
                    // search  thirdly
                    let d = rst.data.data
                    for (let k = 0; k <= d.length - 1; k++) {
                        d[k].children = []
                        let nape = d[k]
                        if (nape.status === 'VALID') nape.status = this.$t('vlid')
                        if (nape.status === 'INVALID') nape.status = this.$t('invlid')
                        if (nape.hasChildren === true) {
                           delete nape.hasChildren
                           nape.children = [
                               { id: this.fakeid++ }
                           ]
                        }
                    }
                    expandedRows.children = rst.data.data
                }
            }
        },
        async getNowData () {
            let rst = await dictree(this.hanldCode)
            if (rst.data.code === '000000' && rst.data.data !== null) {
                // search  thirdly
                let d = rst.data.data
                let item = this.result.find(cer => {
                    return cer.dicCode === this.hanldCode
                })
                for (let k = 0; k <= d.length - 1; k++) {
                    d[k].children = []
                    let nape = d[k]
                    if (nape.status === 'VALID') nape.status = this.$t('vlid')
                    if (nape.status === 'INVALID') nape.status = this.$t('invlid')
                    if (nape.hasChildren === true) {
                        delete nape.hasChildren
                        nape.children = [
                            { id: this.fakeid++ }
                        ]
                    }
                }
                item.children = rst.data.data
            }
        },
        seachdiclist () {
            this.selectParam.pageNum = 1
            this.getDicList()
        },
          // 监听页面展示数据条数变化
        handleSizeChange (newSize) {
            this.selectParam.pageSize = newSize
            this.getDicList()
        },
        // 监听总页数变化
        handleCurrentChange (newNum) {
            this.selectParam.pageNum = newNum
            window.localStorage.setItem('curpage', newNum)
            this.getDicList()
        },
         // 展示添加弹框
        showAdd (sta, data) {
            if (data !== null) this.hanldCode = data.dicCode
            if (data === null) this.hanldCode = null
            this.isAble = sta
            if (sta) {
                this.addForm.parentCode = data.dicCode
                this.addForm.rootCode = data.dicCode
            }
            // 打开弹窗
            this.addDialogVisible = true
        },
        showEdit (id) {
            dicdetailedit(JSON.stringify(id)).then(res => {
                if (res.data.code === '991002') {
                    this.$message.error(this.$t('datadicexpired'))
                    this.editDialogVisible = false
                    return false
                }
                this.editForm = res.data.data
            })
            // 打开弹窗
            this.editDialogVisible = true
        },
        addDialogVisibleClosed (form) {
             this.$refs[form].resetFields()
        },
        editDialogVisibleClosed (form) {
             this.$refs[form].resetFields()
        },
        // 添加数据字典
        addDic (form) {
            this.$refs[form].validate((valid) => {
                if (!valid) {
                    return false
                }
                dicadd(JSON.stringify(this.addForm)).then(res => {
                    if (res.data.code === '000000') {
                        // 操作成功，给出弹框提示
                            this.$message({
                                message: this.$t('funaddsuc'),
                                type: 'success'
                            })
                            this.$router.go(0)
                            this.addDialogVisible = false
                    } else {
                        this.resultMsg = res.data.message
                        this.$message.error(this.$t('unfunaddsuc'))
                    }
                })
            })
        },
        editdic (form) {
            this.$refs[form].validate((valid) => {
                if (!valid) {
                    return false
                }
                dicedit(JSON.stringify(this.editForm)).then(res => {
                    if (res.data.code === '000000') {
                        // 操作成功，给出弹框提示
                            this.$message({
                                message: this.$t('funaddsuc'),
                                type: 'success'
                            })
                            this.$router.go(0)
                            this.editDialogVisible = false
                    } else {
                        this.editDialogVisible = false
                        this.$message.error(this.$t('unfunaddsuc'))
                    }
                })
            })
        }
    },
    mounted() {
        if (window.localStorage.getItem('curpage')) this.selectParam.pageNum = window.localStorage.getItem('curpage') - 0
        this.getDicList()
    },
    destroyed () {
        if (window.localStorage.getItem('curpage')) window.localStorage.removeItem('curpage')
    }
}
</script>

<style lang="less" scoped>
@import './dicList.less';
</style>
